<!-- @format -->

<script setup>
	import { ref } from 'vue'

	// 收集输入框的值
	const title = ref('')

	const emit = defineEmits()

	// 当回车按下
	const onEnter = () => {
		// 非空校验
		if (!title.value) return alert('任务名称不能为空')
		// 触发父组件的自定义事件
		emit('add-todo', title.value)
		// 清空输入框
		title.value = ''
	}
</script>

<template>
	<header class="header">
		<h1>比特人的记事本</h1>
		<input
			v-model.trim="title"
			@keydown.enter="onEnter"
			class="new-todo"
			placeholder="What needs to be finished?"
			autofocus />
	</header>
</template>
